<!--

    Copyright (c) 2016 mgm technology partners GmbH

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<!DOCTYPE html>
<html>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>

$( function() {
$( "#draggable1" ).draggable();
$( "#droppable1" ).droppable({
  drop: function( event, ui ) {
	$( this )
	  .addClass( "ui-state-highlight" )
	  .find( "p" )
		.html( "dropped1" );
  }
});
} );

$( function() {
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
  drop: function( event, ui ) {
	$( this )
	  .addClass( "ui-state-highlight" )
	  .find( "p" )
		.html( "dropped2" );
  }
});
} );

</script>

<body id="body1">


<!------------------------ BUTTON_ACTION ------------------------>

<!-- completely overlapping buttons -->
<button id="button2"  type="button" style="position:absolute; left: 30px; top: 30px; width: 10px; height: 10px"></button>
<button id="button1"  type="button" style="position:absolute; left: 0px ; top: 0px; width: 100px; height: 100px">Button 1</button>

<!-- button to click when you want to close a context menu (opened by a previous right click) -->
<button id="somewhereelse" type="button" style="position:absolute; left: 0px ; top: 101px; width: 100px; height: 100px">somewhere else</button>


<!------------------------ INPUT_ACTION ------------------------>

<!-- completely overlapping text input fields -->
<form>
  <input id="input2" type="text" style="position:absolute; left: 30px; top: 232px; width: 10px; height: 10px">
  <input id="input1" type="text" style="position:absolute; left: 0px; top: 202px; width: 100px; height: 100px">
</form> 


<!------------------------ DRAG_AND_DROP_ACTION ------------------------>

<!-- completely overlapping jQuery droppables and draggables -->
<div id="droppable2" class="ui-widget-header" style ="position:absolute; left: 20px; top: 360px; width: 50px; height: 50px; border: 1px solid #ccc; z-index: 1000;"></div>
<div id="draggable2" class="ui-widget-content" style="position:absolute; left: 20px; top: 564px; width: 20px; height: 20px; border: 1px solid #ccc; z-index: 1000;"></div>

<div id="droppable1" class="ui-widget-header" style ="position:absolute; left: 0px; top: 320px; width: 200px; height: 200px; border: 1px solid #ccc; z-index: 1001"></div>
<div id="draggable1" class="ui-widget-content" style="position:absolute; left: 0px; top: 534px; width: 100px; height: 100px; border: 1px solid #ccc; z-index: 1001"></div>


<!------------------------ OPEN_NEW_WINDOW_ACTION ------------------------>

<!-- completely overlapping Links -->
<a id="link2" target="_blank" href="#" style="position:absolute; left: 30px; top: 680px; width: 20px; height: 20px; border: 1px solid #ccc;">L2</a>
<a id="link1" target="_blank" href="#" style="position:absolute; left: 0px; top: 650px; width: 100px; height: 100px; border: 1px solid #ccc;">Link1</a>


<!------------------------ CORNER_CASES ------------------------>

<!-- partially overlapping buttons -->
<button id="button4"  type="button" style="position:absolute; left: 10px; top: 800px; width: 100px; height: 100px">Button 4</button>
<button id="button3"  type="button" style="position:absolute; left: 0px ; top: 800px; width: 100px; height: 100px">Button 3</button>

<!-- div with a single visible HTML element as direct child nodes -->
<div id="div3">
	<button id="button5" type="button" style="position:absolute; left: 0px; top: 910px; width: 100px; height: 100px">Button 5</button>
</div>

<!-- visible table with two non-overlapping visible HTML elements as leaf nodes -->
<table id="table1" border="1" onclick="this.border=0" style="position:absolute; left: 0px ; top: 1030px; width: 100px; height: 100px">
	<tr>
		<td>
			<button id="button6" type="button" onclick="this.innerHTML='button 6 clicked'" type="button">Button 6</button>
		</td>
	</tr>
	<tr>
		<td>
			<button id="button7" type="button" onclick="this.innerHTML='button 7 clicked'" type="button">Button 7</button>
		</td>
	</tr>	
</table>

<!-- visible table with one visible HTML element as a leaf node -->
<table id="table2" border="1" onclick="this.border=0" style="position:absolute; left: 0px ; top: 1140px; width: 100px; height: 100px">
	<tr>
		<td>
			<button id="button8" onclick="this.innerHTML='button 8 clicked'" type="button">Button 8</button>
		</td>
	</tr>
</table>

<!-- Link with two non-overlapping button as leaf nodes -->
<a id="link3" target="_self" href="#bottom" style="position:absolute; left: 30px; top: 1250px">
	<button id="button9" onclick="this.innerHTML='button 9 clicked'" type="button">Button 9</button>
	<button id="button10" onclick="this.innerHTML='button 10 clicked'" type="button">Button 10</button>
</a>

<!-- Link with one button as a leaf node -->
<a id="link4" target="_self" href="#bottom" style="position:absolute; left: 30px; top: 1350px">
	<button id="button11" onclick="this.innerHTML='button 11 clicked'" type="button">Button 11</button>
</a>

<!-- Anchor for the bottom of the page -->
<div id="bottom" style="position:absolute; left: 0px; top: 1500px" />

</body>
</html>